<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>我是上p:msg:{{msg}}</p>
        <my-book :name="namep" :price="pricep"></my-book>
        <p>我是下p</p>
        <input type="button" value="修改价格" @click="changePrice" >
        <input type="button" value="修改msg" @click="changeMsg" >
    </div>
</body>

</html>
<script src="./js/vue.global.js"></script>
<script>
    // 定义一个子组件
    const MyBook = {
        props: ['name', 'price'],
        template: `
            <div>
                <p>书名：{{name}}</p>
                <p>价格：{{price}}</p>
            </div>
        `,
        beforeCreate(){
            console.log("子：beforeCreate");
        },
        created(){
            console.log("子：created");
        },
        beforeMount(){
            console.log("子：beforeMount");
        },
        mounted(){
            console.log("子：mounted");
        },
        beforeUpdate(){
            console.log("子：beforeUpdate");
        },
        updated(){
            console.log("子：updated");
        },
    }

    const { createApp } = Vue;

    let app1 = createApp({
        data() {
            return {
                msg: "书籍信息",
                namep: "三国演义",
                pricep: 51.2
            }
        },
        components: { MyBook },
        methods:{
            changePrice(){
                this.pricep++;
            },
            changeMsg(){
                this.msg+="1";
            }
        },
        beforeCreate(){
            console.log("父：beforeCreate");
        },
        created(){
            console.log("父：created");
            console.log("this",this);
        },
        beforeMount(){
            console.log("父：beforeMount");
        },
        mounted(){
            console.log("父：mounted");
        },
        beforeUpdate(){
            console.log("父：beforeUpdate");
        },
        updated(){
            console.log("父：updated");
        },
    });

    app1.mount("#app");


</script>